.app-home {
  height: 100%;
  justify-content: space-between;
}
.app-home header {
  flex: 4;
}
.app-home main {
  flex: 10;
}
.app-home main section:nth-child(1) {
  flex: 3;
}
.app-home main section:nth-child(1) .ranking {
  flex: 2;
  background-image: url(../imgs/index-card-rank.png);
  background-size: 110px;
  background-position: -12px 10px;
  background-color: #1592CC;
}
.app-home main section:nth-child(1) .ranking p:nth-child(1) {
  top: 10px;
  left: 12px;
}
.app-home main section:nth-child(1) .ranking p:nth-child(2) {
  right: 12px;
  bottom: 6px;
}
.app-home main section:nth-child(1) .punch {
  flex: 3;
  margin-left: 10px;
  background-image: url(../imgs/index-card-sum.png);
  background-size: 100px;
  background-position: 6px 10px;
  background-color: #7BCBF5;
}
.app-home main section:nth-child(1) .punch p:nth-child(1) {
  top: 10px;
  left: 12px;
}
.app-home main section:nth-child(1) .punch p:nth-child(2) {
  width: 100px;
  right: 22px;
  bottom: 20px;
  border: 2px solid #005177;
}
.app-home main section:nth-child(2) {
  flex: 3;
}
.app-home main section:nth-child(2) .exercise {
  flex: 1;
  margin-right: 10px;
  background-image: url(../imgs/index-card-data.png);
  background-size: 180px;
}
.app-home main section:nth-child(2) .exercise p {
  top: 10px;
  left: 12px;
}
.app-home main section:nth-child(2) .medal {
  flex: 1;
  background-image: url(../imgs/index-card-badge.png);
  background-size: 110px;
  background-position: 0 15px;
  background-color: #92BEE3;
}
.app-home main section:nth-child(2) .medal p:nth-child(1) {
  top: 10px;
  left: 12px;
}
.app-home main section:nth-child(2) .medal p:nth-child(2) {
  right: 14px;
  bottom: 4px;
}
.app-home main section:nth-child(3) {
  flex: 2;
  background-image: url(../imgs/index-swiper-bg2.jpg);
  background-size: 360px;
  background-position: 0 -35px;
}
.app-home main section:nth-child(3) p {
  top: 10px;
  left: 12px;
}
.app-home main section:nth-child(4) {
  flex: 2;
  background-image: url(../imgs/index-card-run.png);
  background-size: 360px;
  background-position: 0 -35px;
}
.app-home main section:nth-child(4) p {
  top: 10px;
  left: 12px;
}
.app-home footer {
  width: 100%;
  flex: 2;
  text-align: center;
  bottom: 0px;
}
.app-home footer div {
  width: 100%;
  height: 70px;
  position: fixed;
  bottom: 0px;
  justify-content: space-between;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.app-home footer div a {
  flex: 1;
  justify-content: center;
  color: #101010;
}
.app-home footer div a i {
  font-size: 28px;
  margin-bottom: 5px;
}
.app-home footer div .active {
  color: #4294FF;
}
